import FoldBox from '@/components/Common/FoldBox'
import Searcher from '@/components/Common/Searcher'
import styles from './index.module.less'
import { history } from 'umi'
import { InfiniteScroll, Divider, Empty } from 'antd-mobile'
import { useFetchPageList } from '@/hooks/useFetchPageList'
import { SkeletonParagraphWrap } from '@/components/Common/Skeleton'
import type { ClassListData } from './interface'
import type { SearchOption } from '@/components/Common/Searcher/interface'
import MoreLoader from '@/components/Common/MoreLoader'
import dayjs from 'dayjs'
import Tag from '@/components/Common/Tag'
import { stores } from '@/stores'
import classNames from 'classnames'

export const ExpandContent = (props: ClassListData) => {
    const { id, student_number } = props

    // 非机构角色时`班级详情`可见
    const showClassDetail = !stores.userStore.isCompany

    // 班级无学员时，学员管理不可点击
    const studentManageDisable = student_number === 0

    // 班级详情
    const openClassDetail = () => {
        history.push({ pathname: '/classManage/detail', query: { id: String(id) } })
    }
    // 学员管理
    const openStudentManage = () => {
        if (studentManageDisable) return

        history.push({ pathname: '/studentManage/index', query: { id: String(id) } })
    }
    // 质量评估
    const openQualityEvaluate = () => {
        history.push({ pathname: '/qualityEvaluate/index', query: { id: String(id) } })
    }

    return (
        <div className={styles.expandContent}>
            {showClassDetail && (
                <>
                    <span onClick={openClassDetail}>班级详情</span>
                    <Divider direction="vertical" />
                </>
            )}

            <span
                className={studentManageDisable ? styles.disable : ''}
                onClick={openStudentManage}
            >
                学员管理
            </span>

            <Divider direction="vertical" />

            <span onClick={openQualityEvaluate}>质量评估</span>
        </div>
    )
}

export const ClassManage = () => {
    const paramsOption: SearchOption[] = [
        { label: '类别', param: 'name' },
        { label: '编号', param: 'code' },
    ]

    const {
        dataList,
        hasMore,
        loading,
        loadMore,
        updateFilterParams,
    } = useFetchPageList<ClassListData>(`/country/group/list`, {
        params: {
            per_page: 10,
            /** 根据培训时间倒序排序 */
            time_sort: 2,
        },
    })

    /** 是否结班 */
    const isClassClosed = (endDate: string) => {
        if (dayjs(new Date().toLocaleDateString()) > dayjs(endDate)) {
            return true
        }
        return false
    }

    return (
        <div>
            <Searcher
                options={paramsOption}
                onParamValueChange={(param, value) => {
                    updateFilterParams({ [param]: value })
                }}
                /** 切换搜索类型时，重置搜索条件。并重新请求。 */
                onParamChange={param => {
                    updateFilterParams({ [param]: '' })
                }}
            />

            <div
                className={classNames([styles.content], {
                    // 机构的班级管理页面无Tab组件，内容高度有变化
                    [styles.content_company]: stores.userStore.isCompany,
                })}
            >
                <SkeletonParagraphWrap
                    animated
                    lineCount={10}
                    loading={dataList.length === 0 && loading}
                >
                    {dataList.length > 0 && (
                        <FoldBox.Group>
                            <div className={styles.list}>
                                {dataList.map(item => {
                                    const { id, name, code, region, begin_date, end_date } = item
                                    return (
                                        <FoldBox
                                            key={id}
                                            value={id}
                                            title={name}
                                            className={styles.list_foldBox}
                                            statusBar={
                                                isClassClosed(end_date) ? (
                                                    <Tag color="success" name="已结班" />
                                                ) : (
                                                    <Tag color="error" name="未结班" />
                                                )
                                            }
                                            expandContent={<ExpandContent {...item} />}
                                        >
                                            <div className={styles.list_item}>
                                                <span>地点：{region}</span>
                                                <span>班级编号：{code}</span>
                                                <span>
                                                    培训时间：{`${begin_date}至${end_date}`}
                                                </span>
                                            </div>
                                        </FoldBox>
                                    )
                                })}
                            </div>

                            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                                <MoreLoader hasMore={hasMore} />
                            </InfiniteScroll>
                        </FoldBox.Group>
                    )}

                    {dataList.length === 0 && <Empty description="暂无数据" />}
                </SkeletonParagraphWrap>
            </div>
        </div>
    )
}

export default ClassManage
